<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/myprofile' }">用户中心</el-breadcrumb-item>
        <el-breadcrumb-item>添加公司</el-breadcrumb-item>
        </el-breadcrumb>
        <center>
            <div style="width:500px">
                <el-form label-width="80px" class="demo-ruleForm" v-if="create_table" size="medium">
                    <center><p>添加公司</p></center>
                    <el-form-item label='公司名称'>
                        <el-input placeholder='请输入公司名称' v-model="username"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址">
                        <el-select placeholder="请选择省" v-model="province" style="width:100px">
                            <el-option v-for="(item,index) in json_list" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                        <el-select placeholder="请选择市" v-model="city" v-if='this.province' style="width:100px">
                            <el-option v-for="(item,index) in json_list[this.province]['city']" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                        <el-select placeholder="请选择县" v-model="county" v-if='this.city' style="width:100px">
                            <el-option v-for="(item,index) in json_list[this.province]['city'][this.city]['area']" :key="index" :label="item.name" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-form-item>
                        <el-button type="primary" @click="company_create">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </center>
    </div>
</template>
<script>
import {get_create_company_get, get_city_code} from './axios_api/api.js'
export default {
    data(){
        return {
            create_table: true,
            // 公司名
            username: '',
            json_list: [],
            province: '',
            city: '',
            county: '',
        }
    },
    mounted() {
        this.get_city()

    },
    methods: {
        company_create() {
            // 拼接收件地址
            let address;
            if(this.province && this.city && this.county){
                address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name + '' + this.json_list[this.province]['city'][this.city]['area'][this.county].name + '';
            }else if(this.province && this.city){
                address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name
            }else if(this.province){
                address = this.json_list[this.province].name
            }else{
                address = ''
            }
            get_create_company_get({'username': this.username,'address': address}).then(res => {
                console.log(res);
            })
            
        },
        // 获取城市信息
        get_city(){
            get_city_code().then(res => {
                console.log(res)
                this.json_list = res.json_list
            })
        },
    }
}
</script>


<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>